人們討厭等待，特別是加載網站的時候，可有些時候由于網速或者瀏覽器的原因，等待總是不可避免，如果在網站中也能像移動應用一樣，有創意的進度條，會很大地減少人們的焦慮，還能避免因等待過久放棄進入這種不幸的事故。

相對于移動端，在網站中使用進度條不常見，該用哪種方式呈現給訪客也是一個考驗設計師的難題。現在你可以來看看這10個在網站中創意運用進度條的設計，它們既帶給訪客樂趣，也不妨礙內容閱讀，學習一下，讓它們在無形的展示中留住網速拙急的訪客！（大多數提供源碼，你可以很方便地學習它們）

進度條運用得當可不簡單，細節是魔鬼，當你不知道如何處理這個魔鬼時，建議閱讀《談談加載(LOADING)的那點事》，你也可以從其他優秀作品中吸取靈感：《18個讀取進度條的優秀設計案例》

Creative Loading Effects

這個教程非常漂亮，展示了不止一種加載進度的方式，你可以點擊DEMO玩一下。

Spinning Loading

用大寫的「Loading?」，中間的O以新奇的動態旋轉，是個非常清新的設計，提供了源碼，可以很方便應用到你的網站。

Planets

看兩個萌萌的小星球在跳舞真是太好玩了，它特別適合用在卡通風格的網站上。

Sinister Loadscreen

是的，看起來很邪惡的形象，不過很適合應用在暗黑系的黑色風格網站上，或者你可以用它來營造神秘感。

Yet Another Loading Animation

這個動效做得非常有節奏感，你可能想把它應用在音樂風格的網站上。

CProgress

Cprogress使用jQuery來展現一個非常酷的和易于使用的loadscreen。強大的是，你也能鼓搗成這幾行代碼，因為它們是完全可定制的！

Spin.js

一個讓世界快速旋轉的「Loading?」！你也可以通過控制右邊的滑塊來改變它的形狀，給它加點陰影，甚至改變旋轉的方向！

Alessio Atzeni

這教程又酷又好學，因為它是完全用HTML和CSS來實現的，還有三種進度模板供你選擇。

Facebook-ish Loading Animation

如果你想讓網站看起來像Facebook，那么這個進度條最適合你了，它的加載方式與Facebook加載圖像時一樣。

Flickr Style

如果你是Flickr的愛好者，那么這個不能錯過，完全仿照Flickr的效果來。

原文地址：1stwebdesigner
本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：